<template>
    <div>
        <el-steps :active="step" align-center finish-status="success">
            <el-step title="Step 1" description="基本参数" />
            <el-step title="Step 2" description="单选题" />
            <el-step title="Step 3" description="填空题" />
            <el-step title="Step 4" description="判断题" />
            <el-step title="Step 5" description="多选题" />
            <el-step title="Step 6" description="大题" />
            <el-step title="Step 7" description="确认保存" />
        </el-steps>
    </div>


    <div class="container" v-if="step === 0">
        <h1 style="margin-left: 23%;">基本参数</h1>
        <el-form :model="saveExamParm" label-width="auto" :rules="rules" ref="ruleFormRef">
            <el-form-item label="考试名" prop="examName">
                <el-input class="input3" v-model="saveExamParm.examName" />
            </el-form-item>

            <el-form-item label="开始时间" prop="beginTime">
                <el-date-picker :disabled-date="(date:Date)=>{return date.getTime()>new Date(new Date().setDate(new Date().getDate()+364)).getTime()}" v-model="saveExamParm.beginTime" type="datetime" placeholder="Select date and time" />

            </el-form-item>

            <el-form-item label="时长" prop="validity">
                <el-input class="input4" v-model.number="saveExamParm.validity" />（分钟）
            </el-form-item>

            <el-form-item label="所属班级">
                全校
            </el-form-item>

            <el-form-item label="报考须知或描述">
                <el-input type="textarea" v-model="saveExamParm.notes" class="input3"></el-input>
            </el-form-item>

            <el-form-item  >
                <el-divider style="width:60%" />
            </el-form-item>

            <el-form-item v-for="(index) in 5"  >
                {{mp[index]}}：<el-input-number v-model="saveExamParm.examScoreList[index]" :max="100"></el-input-number>
            </el-form-item>
        </el-form>
    </div>



    <div v-if="step!==0 && step < 6">
        <div class="table">
            <div style="float: left; margin-top: 10px; margin-left: 16px;width: 200px;">
                <el-text size="large">id：</el-text>
                <el-input class="input2" v-model="problemParm.problemId" @change="getProblemList"
                    :placeholder="$t('problemView.searchInput')" />
            </div>

            <div style="float: left; margin-top: 10px;">
                <el-text size="large">{{ $t('problemView.search') }}</el-text>
                <el-input class="input" v-model="problemParm.problemDescribe" @change="getProblemList"
                    :placeholder="$t('problemView.searchInput')" />
            </div>

            

            <div style="float: right; margin-top: 15px;">
                <el-button style="width: 150px;height: 40px;" type="primary" plain @click="chooseProblemListVisible=true">已选择的题目({{saveExamParm.examProblemList[step].length}})</el-button>
            </div>
            <div style="float: right;margin-right: 10%;margin-top: 20px;">{{mp[step]}}：{{saveExamParm.examScoreList[step]}} * {{ saveExamParm.examProblemList[step].length }} = {{saveExamParm.examScoreList[step]*saveExamParm.examProblemList[step].length }}</div>

            <div style="float: left;">
                <el-dropdown placement="bottom" style="margin-left: 15px; margin-top: 19px;">
                    <el-button class="buttom"> {{ $t('problemView.difficulty') }}<el-icon>
                            <ArrowDown />
                        </el-icon></el-button>
                    <template #dropdown>
                        <el-dropdown-menu>
                            <el-dropdown-item @click="handleDifficultyChange(null)">{{ $t('enum.all') }}</el-dropdown-item>
                            <el-dropdown-item @click="handleDifficultyChange(1)">{{ $t('enum.simple') }}</el-dropdown-item>
                            <el-dropdown-item @click="handleDifficultyChange(2)">{{ $t('enum.medium') }}</el-dropdown-item>
                            <el-dropdown-item @click="handleDifficultyChange(3)">{{ $t('enum.difficulty')
                            }}</el-dropdown-item>
                        </el-dropdown-menu>
                    </template>
                </el-dropdown>
            </div>

            <el-table :data="problemList.items" class="el_table">
                <el-table-column prop="id" show-overflow-tooltip label="id" width="150px"/>
                <el-table-column prop="problemDescribe" show-overflow-tooltip :label="$t('problemView.description')" width="400px"/>
                <el-table-column prop="difficulty" sortable :label="$t('problemView.difficulty')" width="150px" >
                    <template #default="scope">
                        {{getDifficultyType(scope.row.difficulty,$t)}}
                    </template>
                </el-table-column>
                <el-table-column prop="type" sortable :label="$t('problemView.type')">
                    <template #default="scope">
                        {{getProblemType(scope.row.type,$t)}}  
                    </template>
                </el-table-column>
                <el-table-column prop="knowledgeList" size="large" show-overflow-tooltip :label="$t('problemView.knowledge')"/>
                <el-table-column>
                    <template #default="scope">
                        <el-button v-if="findIndex(scope.row.id)===-1" type="primary" link @click="saveExamParm.examProblemList[step].push(scope.row)">添加</el-button>
                        <el-button v-else type="danger" @click="remove(scope.row.id)" link>移除</el-button>

                    </template>
                </el-table-column>
            </el-table>
        
        <div class="pagination"><el-pagination layout="prev, pager, next" :page-size="problemParm.pageSize" :current-page="problemParm.pageNo" :total="problemList.counts" @current-change="handlePageChange"/></div></div>

    </div>


    <div class="container" v-if="step===6" >
        <h1 style="margin-left: 30%;">参数确认</h1>
        <el-form>
            <el-form-item label="考试名:">{{saveExamParm.examName}}</el-form-item>
            <el-form-item label="时间:">{{saveExamParm.beginTime.toLocaleString()}} - {{new Date(new Date(endTime).setMinutes(new Date(endTime).getMinutes()+saveExamParm.validity)).toLocaleString()}} 共{{saveExamParm.validity}}分钟</el-form-item>
            <el-form-item v-for="index in 5">
                {{mp[index]}}：{{saveExamParm.examScoreList[index]}} * {{ saveExamParm.examProblemList[index].length }} = {{saveExamParm.examScoreList[index]*saveExamParm.examProblemList[index].length }}
            </el-form-item>

            <el-form-item label="总分 ： ">
                <b>{{score}}</b>
            </el-form-item>
        </el-form>
    </div>


    <div class="buttom">
        <el-button @click="nextStep(-1)" :disabled="step <= 0">上一步</el-button>
        <el-button @click="nextStep(1)" v-if="step<6">下一步</el-button>
        <el-button v-if="step ===6" @click="saveExam()">保存</el-button>
    </div>





    <el-dialog v-model="chooseProblemListVisible" title="已选择的题目" width="1000" center draggable>
        <el-table :data="saveExamParm.examProblemList[step]">
            <el-table-column prop="id" show-overflow-tooltip label="id" width="150px"/>
            <el-table-column prop="problemDescribe" show-overflow-tooltip :label="$t('problemView.description')" width="400px"/>
            <el-table-column label="操作">
                <template v-slot="scope">
                    <el-button type="primary" :disabled="scope.$index===0" @click="handleProblemIndex(scope.$index,-1)"><el-icon><Top /></el-icon></el-button>
                    <el-button type="primary" :disabled="scope.$index===saveExamParm.examProblemList[step].length-1" @click=handleProblemIndex(scope.$index,1)><el-icon><Bottom /></el-icon></el-button>
                    <el-button type="danger" @click="remove(scope.row.id)">移除</el-button>
                </template>
            </el-table-column>
            <el-table-column label="人工批阅" v-if="step===5">
                <template v-slot="scope">
                    <el-checkbox v-model="saveExamParm.needPeople[scope.row.id]" label="需要" size="large" />
                </template>
            </el-table-column>
        </el-table>
    
    </el-dialog>
</template>

<script setup lang="ts">
import useCreateExamAdmin from '@/hooks/admin/useCreateExamAdmin';
import useEnum from '@/base/useEnum';
import { ref } from 'vue';
import useProblem from '@/hooks/useProblem'
import { onMounted } from 'vue';
const {problemParm,problemList,handlePageChange,getProblemList,handleDifficultyChange}=useProblem()


const { saveExamParm, step, rules, ruleFormRef,score,getExamInfo,saveExam,handleProblemIndex}= useCreateExamAdmin()
const {getProblemType,getDifficultyType} = useEnum()
const chooseProblemListVisible=ref(false)
const endTime=ref(saveExamParm.value.beginTime)
const mp=["","单选分数","填空分数","判断分数","多选分数","大题分数"]

const props=defineProps(['examId'])

onMounted(async()=>{
    // console.log(props.examId)
    if(props.examId !==null)await getExamInfo(props.examId)
})

    async function nextStep(v: number) {
        if(step.value===0){
            if(!ruleFormRef.value)return

            ruleFormRef.value.validate((valid)=>{
                if(valid){
                    step.value += v;
                    problemParm.value.type=step.value
                    getProblemList()
                }
            })
        }else{
            step.value += v;
            problemParm.value.type=step.value
            await getProblemList()
        }
    }

    function findIndex(id:number){
        let index=-1;
        index=saveExamParm.value.examProblemList[step.value].findIndex(p=>p.id===id)
        return index
    }

    function remove(id:number){
        let index=findIndex(id);
        saveExamParm.value.examProblemList[step.value].splice(index,1);
    }
</script>



<style scoped>
.container {
    margin-top: 30px;
    margin-left: 30%;
    height: 635px;
}

.input3 {
    width: 400px
}

.input4 {
    width: 170px
}

.input {
    margin-left: 10px;
    margin-bottom: 10px;
    width: 70%;
    margin-top: 10px;
}

.input2 {
    margin-top: 10px;
    margin-left: 10px;
    margin-bottom: 10px;
    width: 70%;
    height: 30px;
}


.table {
    margin-top: 3%;
    width: 100%;
    height: 635px;
}
.el_table {
    width: 100%;
}

.pagination {
    margin-top: 10px;
    display: flex;
    justify-content: center;
}

.buttom {
    margin-left: 43%;

}
</style>